import React, {Component} from 'react'


import './SelectUsers.scss'
import Grid from '@material-ui/core/Grid';
import Input from '@material-ui/core/Input';
import Button from '@material-ui/core/Button';
import Divider from '@material-ui/core/Divider';
import AddIcon from '@material-ui/icons/Add';
import Select from '@material-ui/core/Select';



class SelectUsers extends Component {
    state = {
        numberformat: '15618588238',
        users:[],
        isShowUser:false,
        indexActive:0,
        sex: '男',
        age:'',
        isShowAdd:true,
        userInfo:'',
        isAdd:0,
        uname:'',
    };


    handleChange = name => event => {
        this.setState({
            numberformat: event.target.value
        });

    }
    serchUser = () => {
        if (!(/^1[345789]\d{9}$/.test(this.state.numberformat))) {
            console.log("请输入正确的电话号码")
        } else {
            let formData = new FormData();
            formData.append("tel", this.state.numberformat);
            fetch('http://w.71cp.com/doctor_ajax.php?do=searchuser', {
                method: 'POST',
                body: formData
            }).then((response) => {
                response.json().then((data) => {
                    if (data.succ) {
                        this.setState({
                            users: data.sec,
                            isShowUser:true,
                            isShowAdd:true,
                            userInfo:data.sec[0],
                        });
                        // console.log(data)
                        localStorage.setItem('chooseUser', JSON.stringify(data.sec[0]));
                    } else {
                        console.log(data.msg)
                    }
                })
            }).catch((error) => {
                alert(error)
            })
        }
    }
    chooseUser = (index,item) => {
        localStorage.setItem('chooseUser', JSON.stringify(item));
        this.setState({
            indexActive:index,
            isAdd:0,
            userInfo:item,
            uname:item.usename
        })
    }
    addNewUser = () => {
        console.log("新增")
        this.setState({
            isShowAdd:false,
            isShowUser:true,
            isAdd:1
        })
    }
    choosesex = (event) => {
        this.setState({
            sex:event.target.value
        })
    }
    chooseage = (event) => {
        this.setState({
            age:event.target.value
        })
    }
    nextStep = () => {
        let param = new FormData();
        param.append('uid', this.state.userInfo.id);
        param.append('isAdd', this.state.isAdd);
        param.append('tel', this.state.numberformat);
        param.append('uname', this.state.userInfo.usename);
        param.append('birthday', this.state.userInfo.birthday);
        param.append('sex', this.state.userInfo.sex);
        fetch('http://w.71cp.com/doctor_ajax.php?do=saveUserInfo', {
            method: 'POST',
            body: param
        }).then((response) => {
            response.json().then((data) => {
                if (data.msg === "SUCCESS") {
                    this.props.history.push('/SchemeType');
                } else {
                    console.log(data.msg)
                }
            })
        }).catch((error) => {
            alert(error)
        })

    }
    render() {
        const userItem = this.state.users.map((item,index) => {
            let sex='';
            if(item.sex===1){
                sex="男"
            }else{
                sex="女"
            }
            return (
                <Grid item xs={6} className="useritem"  key={item.id}>
                    <Button
                        className="useritemer"
                        variant="contained"
                        color={this.state.indexActive===index?'secondary':'primary'}
                        onClick={this.chooseUser.bind(this,index,item)}>
                        {item.usename+" "}  {sex+" "}  {item.age}
                    </Button>
                </Grid>
            )
        })

        const isShowUser=this.state.isShowUser
        const isShowAdd=this.state.isShowAdd
        return (
            <div className="warp">
                <Grid container spacing={0} className="gridwrap" >
                    <Grid item xs={7} className="griditem">
                        <Input
                            placeholder="请输入手机号码"
                            fullWidth
                            type="number"
                            className="iteminput"
                            value={this.state.numberformat}
                            onChange={this.handleChange('numberformat')}/>
                    </Grid>
                    <Grid item xs={3} className="griditem">
                        <Button
                            variant="contained"
                            color="primary"
                            className="itembutton"
                            onClick={this.serchUser.bind(this)}>
                            搜索
                        </Button>
                    </Grid>
                </Grid>
                <Divider/>
              
                {
                    isShowAdd ? (
                        isShowUser ? (
                            <Grid container spacing={0} >
                                { userItem}
                                <Grid item xs={6} className="useritem" >
                                    <Button
                                        className="useritemer"
                                        variant="contained"
                                        color="primary"
                                        onClick={this.addNewUser.bind(this)}
                                        >
                                        <AddIcon  />
                                        新增
                                    </Button>
                                </Grid>
                            </Grid>
                        ):(
                            null
                        )
                    ):(
                        <Grid container spacing={8} className="addNewUser">
                            <Grid item xs={12}>
                                <Button >新增用户</Button>
                            </Grid>
                            <Grid item xs={4}>
                                <Button className="usertitle">姓名</Button>
                            </Grid>
                            <Grid item xs={8} className="userright">
                                <Input
                                    placeholder="请输入姓名"

                                />
                            </Grid>
                            <Grid item xs={4}>
                                <Button className="usertitle">性别</Button>
                            </Grid>
                            <Grid item xs={8} className="userright">
                                <Select
                                    className="choosesex"
                                    native
                                    onChange={this.choosesex.bind(this)}
                                    >
                                    <option value={'男'}>男</option>
                                    <option value={'女'}>女</option>
                                </Select>
                            </Grid>
                            <Grid item xs={4}>
                                <Button className="usertitle">年龄</Button>
                            </Grid>
                            <Grid item xs={3} className="userright">
                                <Input
                                    placeholder="请输入年龄"
                                    className="inputage"
                                
                                />
                            </Grid>
                            <Grid item xs={3} className="userright">
                            <Select
                                    className="chooseage"
                                    native
                                    onChange={this.chooseage.bind(this)}
                                    >
                                    <option value={'岁'}>岁</option>
                                    <option value={'个月'}>个月</option>
                                </Select>
                            </Grid>
                        </Grid>
                    )
                }
                

                 <Button variant="contained" color="secondary" className="nextStep" onClick={this.nextStep.bind(this)}>
                    下一步
                </Button>
            </div>
        );
    }
}




export default SelectUsers;
